<template>
  <div class="container" style="height: 70vh;">
    <!-- 下部内容区 -->
    <div class="content">
      <!-- 左侧区域 -->
      <div class="left-panel">
        <div class="panel-header">分类列表</div>
        <div class="panel-content">
                     <div class="folder-list">
             <div class="folder-header">
               <el-checkbox
                 :model-value="folderSelectAllStatus.value"
                 :indeterminate="folderSelectAllStatus.indeterminate"
                 @change="handleFolderSelectAll"
                 class="custom-checkbox">
                 全选分类
               </el-checkbox>
             </div>
             <div class="folder-items">
               <div v-for="folder in folders" :key="folder.id" class="folder-item"
                 :class="{ 'active': currentFolderId === folder.id }">
                 <el-checkbox
                   v-model="folder.checked"
                   @change="checked => handleFolderSelectChange(folder, checked)"
                   class="custom-checkbox folder-checkbox" />
                 <div class="folder-info" @click="handleFolderClick(folder.id)">
                   <div class="folder-icon">
                     <el-icon>
                       <Folder />
                     </el-icon>
                   </div>
                   <div class="folder-details">
                     <div class="folder-name">{{ folder.name }}</div>
                     <div class="folder-count">{{ folder.num }}个素材</div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
        </div>
      </div>
      <!-- 右侧区域 -->
      <div class="right-panel">
        <div class="panel-header">
          <div class="header-left">
            <span>视频列表</span>
            <span v-if="finnishedSelect.length > 0" class="selection-info">
              您已经选择了 {{ finnishedSelect.length }} 个素材
            </span>
          </div>
                     <!-- 工具栏 -->
           <div class="toolbar-actions">
             <!-- 图片视图全选按钮 -->
             <el-checkbox
               v-if="!isTableView"
               :model-value="selectAllStatus.value"
               :indeterminate="selectAllStatus.indeterminate"
               @change="handleImageSelectAll"
               class="select-all-checkbox-toolbar">
               全选当前页
             </el-checkbox>
             <el-button @click="handleSure" circle class="action-btn" title="确定">
               <el-icon>
                 <Check />
               </el-icon>
             </el-button>
             <el-button @click="handleRefresh" circle class="action-btn" title="刷新">
               <el-icon>
                 <Refresh />
               </el-icon>
             </el-button>
             <el-button @click="handleViewSwitch" circle class="action-btn" :title="isTableView ? '切换为图片视图' : '切换为表格视图'">
               <el-icon>
                 <Operation />
               </el-icon>
             </el-button>
           </div>
        </div>
        <div class="panel-content">
          <!-- 内容区域 -->
          <div class="content-area">
            <!-- 表格视图 -->
            <el-table v-if="isTableView" ref="materialTable" :data="materials" class="custom-table"
              @select="handleTableSelect"
              @select-all="handleSelectAll"
              :row-key="row => row.id" bordered>
              <el-table-column type="selection" width="50" :selectable="isSelectable" />
              <el-table-column prop="title" label="素材名" min-width="120">
                <template #default="scope">
                  <div class="material-title">
                    <img :src="scope.row.url_image || ''" alt="thumb" class="material-thumb" />
                    <span>{{ scope.row.title }}</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
                                      <!-- 图片视图 -->
              <div v-else class="grid-view">
                <!-- 图片卡片区域 -->
                <div class="cards-container">
                  <div v-for="item in materials" :key="item.id" class="material-card"
                    :class="{ 'selected': selectedMaterials.includes(item), 'disabled': item.xs_status !== 3 }"
                    @click="handleImageCardClick(item)">
                    <el-checkbox :model-value="selectedMaterials.includes(item)"
                      :disabled="item.xs_status !== 3"
                      @change="checked => handleImageSelectChange(item, checked)" @click.stop class="material-checkbox" />
                   <div class="material-preview">
                     <img :src="item.url_image || ''" alt="thumb" />
                   </div>
                   <div class="material-info">
                     <div class="material-title">{{ item.title }}</div>
                   </div>
                 </div>
                </div>
             </div>
          </div>
          <!-- 分页 -->
          <div class="pagination-bar">
            <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="totalCount"
              :page-size="pageSize" :current-page="currentPage" @current-change="handlePageChange"
              :page-sizes="[10,20,50,100]"
              @size-change="handleSizeChange" class="custom-pagination" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed, nextTick } from 'vue'
import { Search, Position, FolderAdd, Delete, Upload, Files, Refresh, Operation,Check } from '@element-plus/icons-vue'
import axiosUtil from '../../axios-util/axios-util';
import utils from '../../utils/utils';
import LocalStorageUtil from '../../utils/LocalStorageUtil';

const props = defineProps({
  // 是否支持多选（已废弃，现在始终支持多选）
  multiple: {
    type: Boolean,
    default: true,
  }
})

//主题控制light  dark
const theme = utils.getTheme();

const searchText = ref('')
const folders = ref([])
const materials = ref([])
const selectedMaterials = ref<any[]>([])
const currentPage = ref(1)
const pageSize = ref(10)
const totalCount = ref(0)
const isTableView = ref(true)
let currentFolderId = ref(0)
const materialTable = ref(null);
const finnishedSelect = ref([])

// 计算当前页面的全选状态
const selectAllStatus = computed(() => {
  const selectableItems = materials.value.filter(item => item.xs_status === 3)
  const selectableCount = selectableItems.length

  if (selectableCount === 0) {
    return { value: false, indeterminate: false }
  }

  // 计算当前页面中已选中的项目数量
  const currentPageSelectedCount = selectableItems.filter(item =>
    selectedMaterials.value.some(selected => selected.id === item.id)
  ).length

  if (currentPageSelectedCount === 0) {
    return { value: false, indeterminate: false }
  } else if (currentPageSelectedCount === selectableCount) {
    return { value: true, indeterminate: false }
  } else {
    return { value: false, indeterminate: true }
  }
})

// 计算文件夹全选状态
const folderSelectAllStatus = computed(() => {
  const folderCount = folders.value.length

  if (folderCount === 0) {
    return { value: false, indeterminate: false }
  }

  const selectedFolderCount = folders.value.filter(folder => folder.checked).length

  if (selectedFolderCount === 0) {
    return { value: false, indeterminate: false }
  } else if (selectedFolderCount === folderCount) {
    return { value: true, indeterminate: false }
  } else {
    return { value: false, indeterminate: true }
  }
})

onMounted(() => {
  initFolders()
})

// 监听选中素材的变化，同步表格选中状态
watch(selectedMaterials, (newSelection) => {
  if (materialTable.value && isTableView.value) {
    // 避免在初始化过程中重复设置
    nextTick(() => {
      // 清空表格当前选中状态
      materialTable.value.clearSelection()
      // 重新设置选中状态
      newSelection.forEach(item => {
        materialTable.value.toggleRowSelection(item, true)
      })
    })
  }
}, { deep: true })

const initFolders = async () => {
  const response = await axiosUtil.post('api/buiattach/categoryList', {
    agentid: '0',
    mimetype: 'video',
    storeid: LocalStorageUtil.get("id"),
  })
  if (response.data.code === 1 && response.data.data) {
    // 为每个文件夹添加 checked 属性
    folders.value = response.data.data.rows.map(folder => ({
      ...folder,
      checked: false
    }))
    initMaterials(response.data.data.rows[0].id)
  }
}

const initMaterials = async (id?: number) => {
  if (typeof id === 'number') {
    currentFolderId.value = id
  }
  const folderId = typeof id === 'number' ? id : currentFolderId.value
  const response = await axiosUtil.post('api/attachment/selectaliy', {
    agentid: '0',
    categoryid: folderId===0?"":folderId,
    fl_type: '',
    limit: pageSize.value,
    mimetype: 'video/image',
    offset: currentPage.value,
    order: 'desc',
    searchtitle: searchText.value,
    op: '7B%22mimetype%22%3A%22LIKE%22%7D',
  })
  if (response.data.code === 1 && response.data.data) {
    materials.value = response.data.data.data
    totalCount.value = response.data.data.totalCount

    // 数据加载完成后，初始化当前页面的选中状态
    initCurrentPageSelection()
  }
}

const handleFolderClick = (id: number) => {
  currentPage.value = 1
  // 切换文件夹时清空 finnishedSelect
  // finnishedSelect.value = []
  initMaterials(id)
}

const handleSure = () => {
  // 触发事件通知父组件
  emit('confirm')
}

// 定义emit事件
const emit = defineEmits(['confirm'])

const handleRefresh = () => {
  initMaterials()
}

const handleViewSwitch = () => {
  isTableView.value = !isTableView.value
  // 视图切换后，重新初始化选中状态
  nextTick(() => {
    initCurrentPageSelection()
  })
}

const handleTableSelect = (selection, row) => {
  // 始终支持多选：直接更新选中的素材列表
  selectedMaterials.value = selection

  // 更新 finnishedSelect
  // 检查当前行是否在 selection 中
  const isSelected = selection.includes(row)

  if (isSelected) {
    // 如果选中了，检查是否已存在于 finnishedSelect 中
    const exists = finnishedSelect.value.some(item => item.id === row.id)
    if (!exists) {
      finnishedSelect.value.push(row)
    }
  } else {
    // 如果取消选中了，从 finnishedSelect 中移除
    const index = finnishedSelect.value.findIndex(item => item.id === row.id)
    if (index !== -1) {
      finnishedSelect.value.splice(index, 1)
    }
  }
}

const handleSelectAll = (selection) => {
  // 始终支持多选：更新为全选状态
  selectedMaterials.value = selection

  // 更新 finnishedSelect
  // 遍历当前页面的所有素材
  materials.value.forEach(item => {
    const isSelected = selection.includes(item)
    const exists = finnishedSelect.value.some(finishedItem => finishedItem.id === item.id)

    if (isSelected && !exists) {
      // 如果选中了且不在 finnishedSelect 中，则添加
      finnishedSelect.value.push(item)
    } else if (!isSelected && exists) {
      // 如果取消选中了且在 finnishedSelect 中，则移除
      const index = finnishedSelect.value.findIndex(finishedItem => finishedItem.id === item.id)
      if (index !== -1) {
        finnishedSelect.value.splice(index, 1)
      }
    }
  })
}

const handleImageSelectChange = (item: any, checked: boolean) => {
  // xs_status !== 3 的素材禁止选择
  if (item.xs_status !== 3) {
    return
  }
  // 始终支持多选
  if (checked) {
    if (!selectedMaterials.value.includes(item)) {
      selectedMaterials.value.push(item)
    }
    // 更新 finnishedSelect - 选中时添加
    const exists = finnishedSelect.value.some(finishedItem => finishedItem.id === item.id)
    if (!exists) {
      finnishedSelect.value.push(item)
    }
  } else {
    const idx = selectedMaterials.value.indexOf(item)
    if (idx !== -1) {
      selectedMaterials.value.splice(idx, 1)
    }
    // 更新 finnishedSelect - 取消选中时移除
    const index = finnishedSelect.value.findIndex(finishedItem => finishedItem.id === item.id)
    if (index !== -1) {
      finnishedSelect.value.splice(index, 1)
    }
  }
}

const isSelectable = (row: any) => {
  // xs_status !== 3 的素材禁止选择
  return row.xs_status === 3
}

const handleImageCardClick = (item: any) => {
  // xs_status !== 3 的素材禁止选择
  if (item.xs_status !== 3) {
    return
  }
  // 始终支持多选
  const idx = selectedMaterials.value.indexOf(item)
  if (idx === -1) {
    selectedMaterials.value.push(item)
    // 更新 finnishedSelect - 选中时添加
    const exists = finnishedSelect.value.some(finishedItem => finishedItem.id === item.id)
    if (!exists) {
      finnishedSelect.value.push(item)
    }
  } else {
    selectedMaterials.value.splice(idx, 1)
    // 更新 finnishedSelect - 取消选中时移除
    const index = finnishedSelect.value.findIndex(finishedItem => finishedItem.id === item.id)
    if (index !== -1) {
      finnishedSelect.value.splice(index, 1)
    }
  }
}

// 初始化当前页面的选中状态
const initCurrentPageSelection = () => {
  // 清空当前页面的选中状态
  selectedMaterials.value = []

  // 遍历当前页面的数据，检查是否在 finnishedSelect 中
  materials.value.forEach(item => {
    if (item.xs_status === 3) { // 只处理可选择的项目
      const exists = finnishedSelect.value.some(finishedItem => finishedItem.id === item.id)
      if (exists) {
        selectedMaterials.value.push(item)
      }
    }
  })

  // 如果是表格视图，需要等待表格渲染完成后同步选中状态
  if (isTableView.value && materialTable.value) {
    nextTick(() => {
      // 清空表格当前选中状态
      materialTable.value.clearSelection()
      // 重新设置选中状态
      selectedMaterials.value.forEach(item => {
        materialTable.value.toggleRowSelection(item, true)
      })
    })
  }
}

const handleImageSelectAll = (checked: boolean) => {
  // 获取当前页面可选择的素材
  const selectableItems = materials.value.filter(item => item.xs_status === 3)

  if (checked) {
    // 全选：将所有可选择的素材添加到选中列表
    selectableItems.forEach(item => {
      if (!selectedMaterials.value.includes(item)) {
        selectedMaterials.value.push(item)
      }
      // 更新 finnishedSelect
      const exists = finnishedSelect.value.some(finishedItem => finishedItem.id === item.id)
      if (!exists) {
        finnishedSelect.value.push(item)
      }
    })
  } else {
    // 取消全选：从选中列表中移除当前页面的所有素材
    selectableItems.forEach(item => {
      const idx = selectedMaterials.value.indexOf(item)
      if (idx !== -1) {
        selectedMaterials.value.splice(idx, 1)
      }
      // 更新 finnishedSelect
      const index = finnishedSelect.value.findIndex(finishedItem => finishedItem.id === item.id)
      if (index !== -1) {
        finnishedSelect.value.splice(index, 1)
      }
    })
  }
}

// 处理文件夹全选
const handleFolderSelectAll = async (checked: boolean) => {
  // 先更新所有文件夹的选中状态
  folders.value.forEach(folder => {
    folder.checked = checked
  })

  // 然后处理所有文件夹的素材
  for (const folder of folders.value) {
    if (checked) {
      // 全选时：获取该文件夹下的所有文件并添加到 finnishedSelect
      await loadFolderAllMaterials(folder.id, true)
    } else {
      // 取消全选时：获取该文件夹下的所有文件并从 finnishedSelect 中移除
      await loadFolderAllMaterials(folder.id, false)
    }
  }

  // 立即更新当前页面的选中状态
  nextTick(() => {
    initCurrentPageSelection()
  })
}

// 处理单个文件夹选择
const handleFolderSelectChange = async (folder: any, checked: boolean) => {
  folder.checked = checked

  if (checked) {
    // 选中时：获取该文件夹下的所有文件并添加到 finnishedSelect
    await loadFolderAllMaterials(folder.id, true)
  } else {
    // 取消选中时：获取该文件夹下的所有文件并从 finnishedSelect 中移除
    await loadFolderAllMaterials(folder.id, false)
  }

  // 立即更新当前页面的选中状态
  nextTick(() => {
    initCurrentPageSelection()
  })
}

// 加载文件夹下的所有素材
const loadFolderAllMaterials = async (folderId: number, isAdd: boolean) => {
  try {
    const response = await axiosUtil.post('api/attachment/selectaliy', {
      agentid: '0',
      categoryid: folderId,
      fl_type: '',
      limit: 9999, // 设置较大的页面大小以获取所有数据
      mimetype: 'video/image',
      offset: 0,
      order: 'desc',
      searchtitle: '',
      op: '7B%22mimetype%22%3A%22LIKE%22%7D',
    })

    if (response.data.code === 1 && response.data.data) {
      const folderMaterials = response.data.data.data

      // 过滤出 xs_status === 3 的素材
      const selectableMaterials = folderMaterials.filter(item => item.xs_status === 3)

      if (isAdd) {
        // 添加到 finnishedSelect，避免重复
        selectableMaterials.forEach(item => {
          const exists = finnishedSelect.value.some(finishedItem => finishedItem.id === item.id)
          if (!exists) {
            finnishedSelect.value.push(item)
          }
        })
      } else {
        // 从 finnishedSelect 中移除
        selectableMaterials.forEach(item => {
          const index = finnishedSelect.value.findIndex(finishedItem => finishedItem.id === item.id)
          if (index !== -1) {
            finnishedSelect.value.splice(index, 1)
          }
        })
      }
    }
  } catch (error) {
    console.error('加载文件夹素材失败:', error)
  }
}

const handlePageChange = (page: number) => {
  currentPage.value = page
  initMaterials()
}

const handleSizeChange = (size: number) => {
  pageSize.value = size
  initMaterials()
}

const handleMove = () => {
  // 处理素材移动
}

const handleNewFolder = () => {
  // 处理新建文件夹
}

const handleDelete = () => {
  // 处理删除
}

const handleUpload = () => {
  // 处理本地上传
}

const handleAllMaterials = () => {
  // 处理全部素材
}

const handleSearch = () => {
  // 处理搜索
}

const getSelectMateria = () => {
  return selectedMaterials.value[0];
}

const getSelectMateriaAll = () => {
  return selectedMaterials.value[0];
}

const getFinnishedSelect = () => {
  return finnishedSelect.value;
}

defineExpose({
  getSelectMateria,
  getSelectMateriaAll,
  getFinnishedSelect
})
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"'); */
  padding: 0;
  gap: 0;
  box-sizing: border-box;
  overflow: hidden;
  /* backdrop-filter: blur(5px); */
}

.content {
  flex: 1;
  display: flex;
  gap: 16px;
  min-height: 0;
  overflow: hidden;
}

.left-panel,
.right-panel {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.2)"');
  border-radius: 12px;
  box-shadow: 0 0 20px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.3)"');
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  backdrop-filter: blur(10px);
}

.left-panel {
  width: 20%;
  padding: 0 8px;
}

.right-panel {
  width: 80%;
  display: flex;
  flex-direction: column;
}

.panel-header {
  padding: 12px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.2)"');
  color: v-bind('theme === "light" ? "#333" : "#fff"');
  font-size: 1.1em;
  font-weight: bold;
  /* background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"'); */
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.selection-info {
  font-size: 0.9em;
  font-weight: normal;
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

.panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto !important;
}

.toolbar-actions {
  /* background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"'); */
  /* border-bottom: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"'); */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.select-all-checkbox-toolbar {
  color: v-bind('theme === "light" ? "#333" : "#fff"');
  font-weight: 500;
  margin-right: 8px;
}

.content-area {
  flex: 1;
  overflow-y: auto;
  padding: 5px 10px;
  min-height: 0;
}

.pagination-bar {
  padding: 16px;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.1)"');
  border-top: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}

:deep(.el-pagination__total) {
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}
:deep(.el-pagination__goto) {
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}
:deep(.el-pagination__classifier) {
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}
:deep(.el-select__placeholder) {
  color: v-bind('theme === "light" ? "#333" : "#fff"') !important;
}

/* 修改滚动条样式 */
.content-area::-webkit-scrollbar {
  width: 6px;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.2)"');
}

.content-area::-webkit-scrollbar-thumb {
  background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.3)" : "rgba(255, 255, 255, 0.3)"');
  border-radius: 3px;
}

.content-area::-webkit-scrollbar-thumb:hover {
  background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.4)" : "rgba(255, 255, 255, 0.4)"');
}

.content-area::-webkit-scrollbar-track {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.2)"');
  border-radius: 3px;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.3)"');
}

.panel-content::-webkit-scrollbar {
  width: 6px;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.2)"');
}

.panel-content::-webkit-scrollbar-thumb {
  background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.3)" : "rgba(255, 255, 255, 0.3)"');
  border-radius: 3px;
}

.panel-content::-webkit-scrollbar-thumb:hover {
  background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.4)" : "rgba(255, 255, 255, 0.4)"');
}

.panel-content::-webkit-scrollbar-track {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.2)"');
  border-radius: 3px;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.3)"');
}

/* 左侧面板样式优化 */
.folder-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
}

.folder-header {
  padding: 8px 12px;
  border-bottom: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.2)"');
  border-radius: 6px 6px 0 0;
}

.folder-checkbox {
  margin-right: 8px;
}

.folder-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 4px;
}

.folder-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-radius: 6px;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  transition: all 0.3s ease;
  cursor: pointer;
}

.folder-item:hover {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  transform: translateX(4px);
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.5)"');
  box-shadow: 0 0 15px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.3)"');
}

.folder-item.active {
  background: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.2)" : "rgba(64, 158, 255, 0.3)"');
  border-color: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.5)" : "rgba(64, 158, 255, 0.6)"');
  box-shadow: 0 0 20px v-bind('theme === "light" ? "rgba(64, 158, 255, 0.2)" : "rgba(64, 158, 255, 0.3)"');
}

.folder-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.folder-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 170, 255, 0.2);
  border-radius: 6px;
  color: #00aaff;
}

.folder-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

.folder-name {
  color: v-bind('theme === "light" ? "#333" : "#fff"');
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.folder-count {
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.6)" : "rgba(255, 255, 255, 0.6)"');
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 右侧面板样式优化 */
.action-btn {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"') !important;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"') !important;
  color: v-bind('theme === "light" ? "#333" : "#fff"') !important;
  transition: all 0.3s ease !important;
}

.action-btn:hover {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"') !important;
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.5)"') !important;
  color: v-bind('theme === "light" ? "#333" : "#fff"') !important;
  transform: translateY(-2px);
  box-shadow: 0 0 15px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.3)"');
}

/* 表格视图样式 */
.custom-table {
  background: transparent !important;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"') !important;
  border-radius: 8px !important;
  overflow: hidden;
}

.custom-table :deep(.el-table__header) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.1)"') !important;
}

.custom-table :deep(.el-table__header th) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.1)"') !important;
  border-bottom: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.3)"') !important;
  color: v-bind('theme === "light" ? "#333" : "#fff"') !important;
  font-weight: bold !important;
}

.custom-table :deep(.el-table__header-wrapper) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.1)"') !important;
}

.custom-table :deep(.el-table__header tr) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.1)"') !important;
}

.custom-table :deep(.el-table__body-wrapper) {
  background: transparent !important;
}

.custom-table :deep(.el-table__body td) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(16, 18, 45, 0.2)"') !important;
  border-bottom: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)"') !important;
  color: v-bind('theme === "light" ? "#333" : "#fff"') !important;
}

.custom-table :deep(.el-table__row) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(16, 18, 45, 0.2)"') !important;
  transition: all 0.3s ease !important;
}

.custom-table :deep(.el-table__row:hover) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.3)"') !important;
  /* transform: translateX(4px); */
}

.custom-table :deep(.el-table__row:hover td) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.3)"') !important;
}

.custom-table :deep(.el-table__cell) {
  background: transparent !important;
}

.material-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.material-thumb {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
}

.duration-tag {
  background: rgba(0, 170, 255, 0.2);
  color: #00aaff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.9rem;
}

/* 图片视图样式 */
.grid-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 10px;
}

.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.material-card {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
  cursor: pointer;
}

.material-card:hover {
  transform: translateY(-4px);
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.5)"');
  box-shadow: 0 0 20px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.3)"');
}

.material-card.selected {
  border-color: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.5)" : "rgba(64, 158, 255, 0.6)"');
  box-shadow: 0 0 25px v-bind('theme === "light" ? "rgba(64, 158, 255, 0.2)" : "rgba(64, 158, 255, 0.3)"');
}

.material-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.material-card.disabled:hover {
  transform: none;
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  box-shadow: none;
}

.material-checkbox {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  border-radius: 4px;
}

.material-preview {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 比例 */
}

.material-preview img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.duration-overlay {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 40, 80, 0.8);
  color: #00aaff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.8rem;
}

.material-info {
  padding: 10px;
}

.material-info .material-title {
  color: v-bind('theme === "light" ? "#333" : "#fff"');
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 分页样式 */
.custom-pagination :deep(.el-pagination) {
  background: transparent;
}

.custom-pagination :deep(.el-pagination .el-pagination__total),
.custom-pagination :deep(.el-pagination .el-pagination__jump) {
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

.custom-pagination :deep(.el-pagination .btn-prev),
.custom-pagination :deep(.el-pagination .btn-next) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

.custom-pagination :deep(.el-pagination .el-pager li) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

.custom-pagination :deep(.el-pagination .el-pager li.active) {
  background: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.2)" : "rgba(64, 158, 255, 0.3)"');
  border-color: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.5)" : "rgba(64, 158, 255, 0.6)"');
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

.custom-pagination :deep(.el-pagination .el-pager li:hover) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.5)"');
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

/* 自定义复选框样式 */
.custom-checkbox :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #00aaff;
  border-color: #00aaff;
}

.custom-checkbox :deep(.el-checkbox__inner:hover) {
  border-color: #00aaff;
}

/* 响应式布局优化 */
@media screen and (max-width: 1366px) {
  .grid-view {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

@media screen and (max-width: 768px) {
  .grid-view {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .folder-item {
    padding: 8px;
  }

  .folder-icon {
    width: 28px;
    height: 28px;
  }
}
</style>
